<template>
  <div class="app">
    <van-nav-bar title="我的评价" left-text="" left-arrow @click="backlink()" />
    <van-tabs v-model:active="active">
      <van-tab title="待评价" name="a">
        <div class="goodscontainer">
          <div class="goodsbox" v-for="(good, index) in goodslist" :key="index">
            <div class="clubname">
              {{ good.store_name }}<van-icon name="arrow" />
            </div>
            <div class="goodsinfo">
              <div class="goodsimg">
                <img :src="good.goodsimg" alt="" />
              </div>
              <div class="infobox">
                <div class="goodsname">{{ good.goodname }}</div>
                <div class="goodsintro">{{ good.goodsintro }}</div>
                <van-button
                  type="primary"
                  class="goodsbtn"
                  @click="gotolink(good)"
                >
                  发表评价
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已评价" name="b">
        <div class="pingjiacontainer">
          <div
            class="pingjiabox"
            v-for="(pingjia, index) in pingjialist"
            :key="index"
          >
            <div class="datebox">
              <div class="day">{{ pingjia.pingjiaday }}</div>
              <div class="month">/{{ pingjia.pingjiamonth }}月</div>
            </div>
            <div class="pingjiacontent">
              {{ pingjia.content }}
            </div>
            <div class="pingjiaimgs">
              <img
                v-for="(image, i) in pingjia.pingjiaimages"
                :key="i"
                :src="image"
                alt=""
              />
            </div>
            <div class="pingjiagoodbox">
              <div class="pjgdimg">
                <img :src="pingjia.goodsimg" alt="" />
              </div>
              <div class="info2">
                <div class="goodsname">{{ pingjia.goodname }}</div>
                <div class="info3">
                  <div class="goodsintro">{{ pingjia.goodsintro }}</div>
                  <div class="goodsintro">￥{{ pingjia.goodprice }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "a",
      goodslist: [
        {
          store_name: "店铺一号",
          goodsimg: require("../../assets/images/club2.jpg"),
          goodname: "商品名称xxxx",
          goodsintro: "信息xxxxxxx",
        },
        {
          store_name: "店铺二号",
          goodsimg: require("../../assets/images/club2.jpg"),
          goodname: "商品名称yyyy",
          goodsintro: "信息yyyy",
        },
      ],
      pingjialist: [
        {
          pingjiaday: "06",
          pingjiamonth: "3",
          content: "大大xxxxxxxxxxxxxxxxx大大xxxxxxxxxx打打xxxxxxxxxx收拾收拾x",
          pingjiaimages: [
            require("../../assets/images/club2.jpg"),
            require("../../assets/images/club2.jpg"),
          ],
          goodsimg: require("../../assets/images/club2.jpg"),
          goodname: "商品名称yyyy",
          goodsintro: "信息yyyy",
          goodprice: 10,
        },
      ],
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    gotolink(good) {
      this.$router.push({
        name: "AddEvaluate",
        params: {
          orderinfo: JSON.stringify(good),
        },
      });
    },
  },
};
</script>

<style scoped>
.app {
  margin: 0%;
  padding: 0;
  background-color: #f5f3f3;
  min-height: 100vh;
}
.goodscontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.goodsbox {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 10px;
  border-radius: 15px;
}
.clubname {
  display: flex;
  font-size: 16px;
  align-items: center;
}
.goodsinfo {
  display: flex;
  margin: 10px auto 0 auto;
  height: 80px;
}
.goodsimg {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
}
.goodsimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infobox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex-grow: 1;
  margin-left: 5px;
}
.goodsname {
  font-size: 18px;
}
.goodsintro {
  font-size: 14px;
  color: gray;
}
.goodsbtn {
  width: 90px;
  height: 30px;
  font-size: 13px;
  border-radius: 15px;
  align-self: flex-end;
}
.pingjiacontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pingjiabox {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 10px;
  border-radius: 15px;
}
.datebox {
  display: flex;
  align-items: flex-end;
}
.day {
  font-size: 18px;
}
.month {
  font-size: 16px;
}
.pingjiacontent {
  margin-top: 5px;
  font-size: 16px;
  word-break: break-all;
}
.pingjiaimgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  margin-top: 5px;
}

.pingjiaimgs img {
  width: 100%;
  border-radius: 10px;
  height: auto; /* 将高度设置为自动以确保宽高比不变 */
  aspect-ratio: 1 / 1; /* 设置宽高比为1:1，即正方形 */
  object-fit: cover;
}
.pingjiagoodbox {
  width: 100%;
  box-sizing: border-box;
  background-color: #f5f3f3;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  height: 80px;
  display: flex;
}
.pjgdimg {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 10px;
}
.pjgdimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info2 {
  flex-grow: 1;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.info3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>